/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */

/* @import "compass/reset"; */
@import "variables";
@import "targetMixins";

* {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.page_container {
	max-width: $pageWidth;
	margin: 0 auto;
	color: $primary-color;
	font-size: $baseFontSize;
}

#content_container {
	@include stxForDesktops {
		width: $contentWidth;
	}
	@include stxForMinMobilesDevices {
		min-width: $supportedMobilesMinWidth;
	}
	background: $container-bgColor;
}

#main_content_container {
	width: 100%;
	@include stxForDesktops {
		width: $mainContentWidth;
	}
	background-color: lightgray;
	float: left;
}

#secondary_content_container {
	width: 100%;
	@include stxForDesktops {
		width: $secondaryContentWidth;
	}
	background-color: lightblue;
	float: left;
}


#header, #footer {
	width: $contentWidth;
}